<template>
  <div @click="$router.push('/postdetail?id='+postData.id)">
    <!-- 如果文章 type == 1 而且 封面数量在 一到二之间, 显示单图片布局 -->
    <div
      class="singlePost"
      v-if="postData.type == 1 && postData.cover.length >= 1 && postData.cover.length < 3"
    >
      <div class="left">
        <div class="title">{{ postData.title }}</div>
        <div class="info">
          {{postData.user.nikname}}
          <!-- {{postData.comment_length}} 跟帖 -->
          {{postData.comments?postData.comments.length:postData.comment_length}} 跟帖
        </div>
      </div>
      <img :src="postData.cover[0].url" alt class="right" />
    </div>

    <!-- 如果文章 type == 1 而且 封面数量在 三或以上, 显示成多图片布局 -->
    <div class="multipPost" v-if="postData.type == 1 && postData.cover.length >= 3">
      <div class="title">{{postData.title}}</div>
      <div class="imgsWrapper">
        <img :src="postData.cover[0].url" alt />
        <img :src="postData.cover[1].url" alt />
        <img :src="postData.cover[2].url" alt />
      </div>

      <div class="info">
        {{postData.user.nickname}}
        {{postData.comment_length}} 跟帖
      </div>
    </div>

    <!-- 如果 type == 2 而且封面数量在一以上 显示视频布局 -->
    <div class="singleVideo" v-if="postData.type == 2 && postData.cover.length >= 1">
      <div class="title">{{postData.title}}</div>
      <div class="coverWrapper">
        <img :src="postData.cover[0].url" alt />
        <span class="iconfont iconshipin"></span>
      </div>
      <div class="info">
        {{postData.user.nickname}}
        {{postData.comment_length}} 跟帖
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postData"],
};
</script>

<style lang="less" scoped>
// 单图布局
.singlePost {
  display: flex;
  padding: 10/360 * 100vw;
  //   border-bottom: 1px solid #e4e4e4;
  .left {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-right: 10/360 * 100vw;
    .title {
      font-size: 16/360 * 100vw;
      color: #333;
    }
    .info {
      font-size: 14/360 * 100vw;
      color: #888;
    }
  }
  .right {
    height: 76/360 * 100vw;
    width: 120/360 * 100vw;
    object-fit: cover;
  }
}

// 多图片文章布局
.multipPost {
  padding: 10/360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    font-size: 16/360 * 100vw;
    color: #333;
  }
  .imgsWrapper {
    display: flex;
    justify-content: space-between;
    margin: 10/360 * 100vw 0;
    img {
      width: 33%;
      height: 74/360 * 100vw;
      object-fit: cover;
    }
  }
  .info {
    font-size: 14/360 * 100vw;
    color: #888;
  }
}

.singleVideo {
  padding: 10/360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    font-size: 16/360 * 100vw;
    color: #333;
  }
  .coverWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10/360 * 100vw 0;
    img {
      height: 170/360 * 100vw;
      width: 100%;
      object-fit: cover;
    }
    .iconshipin {
      position: absolute;
      font-size: 46/360 * 100vw;
      color: #fff;
      background: #ccc;
      border-radius: 50%;
    }
  }
  .info {
    font-size: 14/360 * 100vw;
    color: #888;
  }
}
</style>